<template>
	<view class="page">
		<!-- Swiper区域 -->
		<swiper circular="false" interval="5000" duration="1000" class="swiper">
			<swiper-item>
				<image mode="widthFix" src="../../static/logo-2.png"></image>
			</swiper-item>
		</swiper>
		
		<!-- 公告通知栏 -->
		<view class="nav-container">
			<view class="notify-container" @tap="toPage('公告通知','/pages/message_list/message_list')">
				<view class="notify-title">
					<image src="../../static/nav-28.png" mode="widthFix" class="notify-icon"></image>
					消息通知
				</view>
				<view class="notify-content">
					你有{{unreadRows}}条未读消息
				</view>
			</view>
		</view>
		
		<!-- 考勤管理 -->
		<view class="nav-container">
			<!-- 栏目标题 -->
			<view class="notify-container,bgc">
				<view class="container-title,list-title">
					考勤工作
				</view>
			</view>
			<!-- 栏目内容 -->
			<!-- 第一行 -->
			<view class="nav-row">
				<!-- 考勤打卡 -->
				<view class="nav" @tap="toPage('考勤打卡','../../page_aw/checkin/checkin')">
					<image src="../../static/nav-2.png" mode="widthFix" class="icon"></image>
					<text class="name">考勤打卡</text>
				</view>
				<!-- 考情统计 -->
				<view class="nav" @tap="toPage('考勤统计','../../page_aw/my_checkin/my_checkin')">
					<image src="../../static/nav-5.png" mode="widthFix" class="icon"></image>
					<text class="name">考勤统计</text>
				</view>
				<!-- 工作周报 -->
				<view class="nav" @tap="toPage('工作日报','../../page_aw/work_daily_list/work_daily_list')">
					<image src="../../static/nav-10.png" mode="widthFix" class="icon"></image>
					<text class="name">工作日报</text>
				</view>
				<!-- 工作日程 -->
				<view class="nav" @tap="toPage('工作日程','../../page_aw/work_date/work_date')">
					<image src="../../static/nav-11.png" mode="widthFix" class="icon"></image>
					<text class="name">工作日程</text>
				</view>
			</view>
		</view>
		
		<!-- 人事外出 -->
		<view class="nav-container">
			<!-- 栏目标题 -->
			<view class="notify-container,bgc">
				<view class="container-title,list-title">
					人事外出
				</view>
			</view>
			<!-- 栏目内容 -->
			<!-- 第一行 -->
			<view class="nav-row">
				<!-- 入职登记 -->
				<view class="nav" @tap="toPage('入职登记','../../page_po/registration/registration')">
					<image src="../../static/nav-15.png" mode="widthFix" class="icon"></image>
					<text class="name">员工登记</text>
				</view>
				<!-- 转岗申请 -->
				<view class="nav" @tap="toPage('转岗申请','../../page_po/transfer/transfer')">
					<image src="../../static/nav-16.png" mode="widthFix" class="icon"></image>
					<text class="name">转岗申请</text>
				</view>
				<!-- 离职申请 -->
				<view class="nav" @tap="toPage('离职申请','../../page_po/dimission/dimission')">
					<image src="../../static/nav-17.png" mode="widthFix" class="icon"></image>
					<text class="name">离职申请</text>
				</view>
				<!-- 出差申请 -->
				<view class="nav" @tap="toPage('出差申请','../../page_po/travle/travle')">
					<image src="../../static/nav-18.png" mode="widthFix" class="icon"></image>
					<text class="name">出差申请</text>
				</view>
			</view>
			<!-- 第二行 -->
			<view class="nav-row">
				<!-- 请假申请 -->
				<view class="nav" @tap="toPage('请假申请','../../page_po/leave/leave')">
					<image src="../../static/nav-19.png" mode="widthFix" class="icon"></image>
					<text class="name">请假申请</text>
				</view>
				<!-- 占位 -->
				<view class="nav">
					<view class="icon"></view>
					<text class="clock">有待开发</text>
				</view>
				<!-- 占位 -->
				<view class="nav">
					<view class="icon"></view>
					<text class="clock">有待开发</text>
				</view>
				<!-- 占位 -->
				<view class="nav">
					<view class="icon"></view>
					<text class="clock">有待开发</text>
				</view>
			</view>
		</view>
		
		<!-- 财务行政 -->
		<view class="nav-container">
			<!-- 标题栏 -->
			<view class="notify-container,bgc">
				<view class="container-title,list-title">
					财务行政
				</view>
			</view>
			<view class="nav-row">
				<view class="nav" @tap="toPage('报销申请','../../page_fa/reimbursement/reimbursement')">
					<image src="../../static/nav-21.png" mode="widthFix" class="icon"></image>
					<text class="name">报销申请</text>
				</view>
				<view class="nav" @tap="toPage('补助申请','../../page_fa/subsidy/subsidy')">
					<image src="../../static/nav-23.png" mode="widthFix" class="icon"></image>
					<text class="name">补助申请</text>
				</view>
				<view class="nav" @tap="toPage('我的工资','../../page_fa/salary_list/salary_list')">
					<image src="../../static/nav-22.png" mode="widthFix" class="icon"></image>
					<text class="name">我的工资</text>
				</view>
				<view class="nav" @tap="toPage('用印申请','../../page_fa/seal/seal')">
					<image src="../../static/nav-24.png" mode="widthFix" class="icon"></image>
					<text class="name">用印申请</text>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popupMsg" type="top">
			<uni-popup-message type="success" :message="'您有新的消息，请注意查!!!'" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>


<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	export default {
		components: {
			uniPopup,
			uniPopupDialog,
			uniPopupMessage,
			uniIcons
		},
		data() {
			return {
				unreadRows: 0,
				lastRows: 0
			}
		},
		onLoad() {
			//监听事件
			let that = this;
			that.socket();
			uni.$on('showMessage', function() {
				that.$refs.popupMsg.open();
			});
			that.ajax(that.url.refreshMessage, 'GET', null, function(resp) {
				that.unreadRows = resp.data.unreadRows;
				that.lastRows = resp.data.lastRows;
				if (that.lastRows > 0) {
					uni.$emit('showMessage');
				}
			});
		},
		onUnload: function() {
			uni.$off('showMessage')
			uni.closeSocket({
				success: () => {
					console.info("退出成功")
				},
			})
		},
		onShow: function() {
			let that = this;
			// 接收websocket消息及处理
			that.webSocketTask.onMessage((res) => {
				that.ajax(that.url.refreshMessage, 'GET', null, function(resp) {
					that.unreadRows = resp.data.unreadRows;
					that.lastRows = resp.data.lastRows;
					if (that.lastRows > 0) {
						uni.$emit('showMessage');
					}
				});
			});
			that.ajax(that.url.refreshMessage, 'GET', null, function(resp) {
				that.unreadRows = resp.data.unreadRows;
				that.lastRows = resp.data.lastRows;
				if (that.lastRows > 0) {
					uni.$emit('showMessage');
				}
			});
		},
		methods: {
			socket(){
			    //创建webSocket
			    this.webSocketTask = uni.connectSocket({
				    url: 'ws://'+this.webUrl+'/webSocket/'+uni.getStorageSync("all-id"),
					header: {
						'content-type': 'application/json'
					},
					success(res) {
						console.log('成功', res);
					},
				})
			 
				// 监听WebSocket连接打开事件
				this.webSocketTask.onOpen((res) => {
					console.info("监听WebSocket连接打开事件", res)
				});
			 
				// 监听WebSocket错误
				uni.onSocketError((res) => {
					console.info("监听WebSocket错误" + res)
				});
			},
			toPage: function(name, url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="less">
	@import url('index.less');
</style>
